{% extends "base.html" %}
{% load static %}

{% block title %}湘行 - 攻略笔记{% endblock %}

{% block extra_css %}
<style>
    /* 页面标题样式 */
    .page-header {
      text-align: center;
      margin: 0 0 40px;
      padding-bottom: 20px;
      border-bottom: 1px solid #e0d8c8;
    }

    .page-title {
      font-size: 32px;
      color: var(--primary-brown);
      position: relative;
      display: inline-block;
      padding-bottom: 15px;
      font-family: "Ma Shan Zheng", cursive;
    }

    .page-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background-color: var(--accent-red);
    }

    .page-subtitle {
      color: #7d6b52;
      margin-top: 15px;
      font-weight: normal;
    }

    /* 主内容容器 */
    .main-container {
      width: 1128px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* 攻略卡片样式 */
    .strategy-card {
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      margin-bottom: 40px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      padding: 30px;
      border: 1px solid #E0D8C0;
      background-image:
        linear-gradient(to bottom, var(--light-bg), transparent),
        url("{% static 'img/paper-texture.jpg' %}"); /* 宣纸纹理 */
    }

    .strategy-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    /* 攻略头部信息 */
    .strategy-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }

    .strategy-info {
      flex: 1;
      min-width: 300px;
    }

    .day-tag {
      display: inline-block;
      background-color: var(--accent-red);
      color: white;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .strategy-desc {
      color: #7d6b52;
      margin-bottom: 15px;
    }

    /* 内容区域 */
    .strategy-content {
      width: 100%;
    }

    .strategy-title {
      color: var(--primary-green);
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 24px;
      font-weight: 600;
      font-family: "Ma Shan Zheng", cursive;
    }

    .route-wrapper {
      background-color: #f5f2ed;
      padding: 15px 20px;
      border-radius: 8px;
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      border: 1px solid #E0D8C0;
    }

    .route-icon {
      color: var(--wood-tone);
      margin-right: 15px;
      font-size: 20px;
    }

    .route-text {
      margin: 0;
      color: #665740;
    }

    /* 景点介绍样式 */
    .attraction {
      margin-bottom: 40px;
      padding-bottom: 30px;
      border-bottom: 1px dashed #e0d8c8;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
    }

    .attraction:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .attraction-img-container {
      flex: 0 0 300px;
      height: 200px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1);
      border: 1px solid #E0D8C0;
    }

    .attraction-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .attraction:hover .attraction-img {
      transform: scale(1.05);
    }

    .attraction-info {
      flex: 1;
      min-width: 300px;
    }

    .attraction-name {
      color: var(--primary-brown);
      margin-top: 0;
      margin-bottom: 12px;
      font-size: 18px;
      display: flex;
      align-items: center;
    }

    .attraction-name i {
      color: var(--wood-tone);
      margin-right: 10px;
    }

    .attraction-desc {
      color: #666;
      text-align: justify;
      margin-bottom: 15px;
    }

    /* 实用信息标签 */
    .tips-container {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .tip-tag {
      display: inline-flex;
      align-items: center;
      background-color: #f8f5f0;
      padding: 5px 12px;
      border-radius: 4px;
      font-size: 13px;
      color: #7d6b52;
      border: 1px solid #E0D8C0;
    }

    .tip-tag i {
      margin-right: 6px;
      color: var(--wood-tone);
    }

    /* 分页样式 */
    .pagination-container {
      text-align: center;
      margin: 50px 0 30px;
    }

    .pagination {
      margin: 0;
    }

    .pagination > li > a,
    .pagination > li > span {
      color: var(--primary-brown);
      background-color: #f5f2ed;
      border: 1px solid #e0d8c8;
      margin: 0 5px;
      border-radius: 4px;
      padding: 8px 15px;
    }

    .pagination > li.active > a,
    .pagination > li.active > span {
      background-color: var(--wood-tone);
      border-color: var(--wood-tone);
      color: white;
    }

    .pagination > li > a:hover {
      background-color: #e9e2d5;
      color: var(--primary-brown);
      border-color: var(--wood-tone);
    }

    /* 收藏按钮样式 */
    .favorite-button {
      background: none;
      border: none;
      color: #ccc;
      font-size: 24px;
      cursor: pointer;
      transition: color 0.3s ease, transform 0.3s ease;
      padding: 5px;
      position: relative;
    }

    .favorite-button:hover {
      transform: scale(1.1);
    }

    .favorite-button.favorited {
      color: var(--accent-red);
      animation: pulse 0.5s ease;
    }

    .favorite-button i {
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }

    .favorite-tooltip {
      position: absolute;
      background-color: rgba(0,0,0,0.7);
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
      margin-top: -5px;
      white-space: nowrap;
      right: 100%;
      margin-right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    /* 收藏动画 */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }

    /* 添加提示框样式 */
    .toast-message {
      position: fixed;
      top: 20px;
      right: 20px;
      background-color: rgba(47, 79, 79, 0.9);
      color: white;
      padding: 10px 20px;
      border-radius: 4px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      z-index: 1000;
      opacity: 0;
      transform: translateY(-20px);
      transition: opacity 0.3s, transform 0.3s;
    }

    .toast-message.show {
      opacity: 1;
      transform: translateY(0);
    }

    /* 加载动画 */
    .favorite-button.loading i {
      animation: spin 1s linear infinite;
    }

    /* 在现有样式基础上添加以下样式 */
    .favorite-button.disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .favorite-button.disabled:hover {
      transform: none;
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
      .main-container {
        width: 100%;
        padding: 0 15px;
      }
    }

    @media (max-width: 768px) {
      .strategy-card {
        padding: 20px;
      }

      .attraction-img-container {
        flex: 0 0 100%;
        height: 180px;
      }

      .page-title {
        font-size: 26px;
      }

      .favorite-tooltip {
        right: auto;
        left: 50%;
        top: -100%;
        transform: translateX(-50%);
        margin-bottom: 5px;
      }
    }
</style>
{% endblock %}

{% block content %}
<div class="main-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">湘西秘境旅游攻略</h1>
      <p class="page-subtitle">探索沈从文笔下的边城风情，体验土家族苗族的浓郁文化</p>
    </div>

    <!-- 两天一晚攻略 -->
    <div class="strategy-card">
      <div class="strategy-header">
        <div class="strategy-info">
          <span class="day-tag">两天一晚</span>
          <p class="strategy-desc">湘渝黔三省交界的边城风情</p>
          <h2 class="strategy-title">湘西两天一晚深度游</h2>
          <div class="route-wrapper">
            <i class="fas fa-map-o route-icon" aria-hidden="true"></i>
            <p class="route-text">茶峒古镇（第一天上午）→ 凤凰古城（第一天下午至夜间）→ 湘西州博物馆（第二天上午）</p>
          </div>
        </div>
        <!-- 收藏按钮 -->
        <button class="favorite-button" data-strategy-id="1" title="收藏攻略">
          <i class="far fa-heart"></i>
          <span class="favorite-tooltip">收藏</span>
        </button>
      </div>

      <div class="strategy-content">
        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1036/600/400" class="attraction-img" alt="茶峒古镇风光：青石板路和传统建筑">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>茶峒古镇</h3>
            <p class="attraction-desc">位于湖南湘西土家族苗族自治州花垣县边城镇，地处湘、渝、黔三省交界处，是沈从文小说《边城》的原型地。古镇始建于清嘉庆八年（1803年），曾是重要的军事重镇和商贸集散地。这里保留了完整的古巷、青石板路和吊脚楼群，最具特色的是"拉拉渡"——一种无需动力的摆渡方式，乘上它可体验"一脚踏三省"的独特地理奇观。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-clock"></i>建议游玩：3小时</span>
              <span class="tip-tag"><i class="fas fa-utensils"></i>特色美食：角角鱼、酸萝卜</span>
              <span class="tip-tag"><i class="fas fa-lightbulb"></i>贴士：清晨人少，适合拍照</span>
            </div>
          </div>
        </div>

        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1037/600/400" class="attraction-img" alt="凤凰古城风光：沱江边的吊脚楼">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>凤凰古城</h3>
            <p class="attraction-desc">坐落于湘西沱江边，是一座浸润着千年历史的边城。青石板路蜿蜒穿城，吊脚楼依山傍水而建，明清古建筑与苗家风情完美交融。作为沈从文笔下的诗意之地和熊希龄的故乡，这里的每一处都充满故事。白天可乘乌篷船泛游沱江，欣赏两岸古朴建筑；傍晚登上南华门城楼，俯瞰夕阳下的古城全景。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-clock"></i>建议游玩：1天</span>
              <span class="tip-tag"><i class="fas fa-bed"></i>推荐住宿：江边吊脚楼客栈</span>
              <span class="tip-tag"><i class="fas fa-moon"></i>夜景必看：虹桥灯光</span>
            </div>
          </div>
        </div>

        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1058/600/400" class="attraction-img" alt="湘西州博物馆：现代化建筑外观">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>湘西州博物馆</h3>
            <p class="attraction-desc">成立于1957年11月1日，是湖南省建立最早的博物馆之一。新馆于2017年9月20日开馆，位于湘西州高新区武陵山大道22号，建筑外形独特，宛如山间巨石。馆内设有多个基本陈列，馆藏文物达2万余件，全面展现了湘西悠久的历史、灿烂的文化、浓郁的民俗风情及丰富的非物质文化遗产。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-clock"></i>建议游玩：2小时</span>
              <span class="tip-tag"><i class="fas fa-ticket-alt"></i>门票：免费（需预约）</span>
              <span class="tip-tag"><i class="fas fa-headphones"></i>讲解：上午10点有免费讲解</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 三天两晚攻略 -->
    <div class="strategy-card">
      <div class="strategy-header">
        <div class="strategy-info">
          <span class="day-tag">三天两晚</span>
          <p class="strategy-desc">古城与自然的完美融合</p>
          <h2 class="strategy-title">湘西三天两晚全景游</h2>
          <div class="route-wrapper">
            <i class="fas fa-map-o route-icon" aria-hidden="true"></i>
            <p class="route-text">凤凰古城（第一天）→ 德夯苗寨（第二天）→ 张家界大峡谷（第三天）</p>
          </div>
        </div>
        <!-- 收藏按钮 -->
        <button class="favorite-button" data-strategy-id="2" title="收藏攻略">
          <i class="far fa-heart"></i>
          <span class="favorite-tooltip">收藏</span>
        </button>
      </div>

      <div class="strategy-content">
        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1039/600/400" class="attraction-img" alt="凤凰古城夜景：灯光璀璨的沱江两岸">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>凤凰古城</h3>
            <p class="attraction-desc">作为湘西旅游的核心地标，建议安排一整天深度游览。清晨可避开人流，在北门城楼附近拍摄沱江晨雾；上午参观沈从文故居、熊希龄故居和杨家祠堂，了解古城历史；午后沿回龙阁漫步，欣赏吊脚楼群的独特建筑风格；傍晚在万名塔附近乘船，看夕阳为古城镀上金边。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-camera"></i>摄影点：北门码头、南华门城楼</span>
              <span class="tip-tag"><i class="fas fa-shopping-bag"></i>特产：苗族银饰、姜糖</span>
            </div>
          </div>
        </div>

        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1040/600/400" class="attraction-img" alt="德夯苗寨：依山而建的苗族传统村落">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>德夯苗寨</h3>
            <p class="attraction-desc">位于湖南湘西州吉首市西郊，意为"美丽的峡谷"，距凤凰古城约1.5小时车程。这里自然风光神奇秀丽，拥有落差216米的流纱瀑布（雨季尤为壮观）、奇峰罗列的峡谷深壑。寨子依山而建，青瓦木楼的吊脚楼、雕花窗棂等建筑古色古香。苗族百姓民风淳朴，保留着完整的传统习俗。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-music"></i>体验：苗族鼓舞、对歌</span>
              <span class="tip-tag"><i class="fas fa-utensils"></i>美食：酸汤鱼、腊肉炒蕨菜</span>
              <span class="tip-tag"><i class="fas fa-car"></i>交通：建议自驾或包车前往</span>
            </div>
          </div>
        </div>

        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1043/600/400" class="attraction-img" alt="张家界大峡谷：壮观的峡谷和玻璃桥">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>张家界大峡谷</h3>
            <p class="attraction-desc">位于湖南张家界市慈利县三官寺土家族乡，紧邻武陵源风景名胜区，距德夯苗寨约2.5小时车程。这里峡谷深切，两岸绝壁万仞，溪流潺潺，瀑布成群，夏季平均气温仅26℃，有"天然空调走廊"之称。景区内的云天渡玻璃桥是世界首座斜拉式高山峡谷玻璃桥。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-ship"></i>体验：玻璃桥、高空滑索</span>
              <span class="tip-tag"><i class="fas fa-clock"></i>建议游玩：5-6小时</span>
              <span class="tip-tag"><i class="fas fa-hiking"></i>装备：舒适运动鞋、防晒用品</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 四天三晚攻略 -->
    <div class="strategy-card">
      <div class="strategy-header">
        <div class="strategy-info">
          <span class="day-tag">四天三晚</span>
          <p class="strategy-desc">全景深度体验湘西魅力</p>
          <h2 class="strategy-title">湘西四天三晚全景深度游</h2>
          <div class="route-wrapper">
            <i class="fas fa-map-o route-icon" aria-hidden="true"></i>
            <p class="route-text">芙蓉镇（第一天）→ 凤凰古城（第二天）→ 乾州古城（第三天上午）→ 张家界国家森林公园（第三天下午至第四天）</p>
          </div>
        </div>
        <!-- 收藏按钮 -->
        <button class="favorite-button" data-strategy-id="3" title="收藏攻略">
          <i class="far fa-heart"></i>
          <span class="favorite-tooltip">收藏</span>
        </button>
      </div>

      <div class="strategy-content">
        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1047/600/400" class="attraction-img" alt="芙蓉镇：瀑布上的千年古镇">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>芙蓉镇</h3>
            <p class="attraction-desc">本名王村，因刘晓庆主演的电影《芙蓉镇》而改名，位于永顺县境内，是一座挂在瀑布上的千年古镇。这里最具特色的是高60米的瀑布穿镇而过，瀑布上方是曲折幽深的石板街，下方是碧绿的酉水河。清晨可拍摄瀑布晨雾，上午游览土司王府遗址，了解土家族历史。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-film"></i>亮点：瀑布奇观、电影取景地</span>
              <span class="tip-tag"><i class="fas fa-utensils"></i>必尝：刘晓庆米豆腐</span>
            </div>
          </div>
        </div>

        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1048/600/400" class="attraction-img" alt="乾州古城：保存完好的三门开建筑">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>乾州古城</h3>
            <p class="attraction-desc">位于吉首市境内，始建于明洪武年间，比凤凰古城更为古朴安静。古城内保存着完整的城墙、城楼、石板街和文庙，其中胡家塘是古城的核心，池塘周围古民居错落有致。这里的三门开是中国古城中独一无二的建筑奇观，由三座城门组成，见证了湘西的军事历史。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-calendar"></i>活动：周六上午民俗表演</span>
              <span class="tip-tag"><i class="fas fa-university"></i>特色：三门开建筑、文庙</span>
            </div>
          </div>
        </div>

        <div class="attraction">
          <div class="attraction-img-container">
            <img src="https://picsum.photos/id/1051/600/400" class="attraction-img" alt="张家界国家森林公园：壮观的石英砂岩峰林">
          </div>
          <div class="attraction-info">
            <h3 class="attraction-name"><i class="fas fa-map-marker" aria-hidden="true"></i>张家界国家森林公园</h3>
            <p class="attraction-desc">作为世界自然遗产，是湘西旅游不可错过的亮点。公园内峰林奇特，沟壑纵横，拥有黄石寨、金鞭溪、袁家界、杨家界、天子山等著名景区。建议第一天下午游览金鞭溪，傍晚乘索道上袁家界；第二天上午参观袁家界的"阿凡达悬浮山"原型乾坤柱。</p>
            <div class="tips-container">
              <span class="tip-tag"><i class="fas fa-route"></i>精华路线：金鞭溪→袁家袁家界→天子山</span>
              <span class="tip-tag"><i class="fas fa-ticket-alt"></i>门票：4天有效，含环保车</span>
              <span class="tip-tag"><i class="fas fa-hiking"></i>难度：中等，适合全家出游</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页导航 -->
    <div class="pagination-container">
      <ul class="pagination">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true"><i class="fas fa-angle-left"></i></span>
          </a>
        </li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true"><i class="fas fa-angle-right"></i></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
{% endblock %}

{% block extra_js %}
<script>
    // 修改后的收藏功能实现
    document.addEventListener('DOMContentLoaded', function() {
        // 全局变量存储收藏状态
        window.favoriteStatus = {};

        // 根据登录状态初始化收藏按钮
        initFavoriteButtons();

        // 从服务器加载已收藏的攻略（仅当用户已登录时）
        if (window.isAuthenticated) {
            loadFavoriteStrategies();
        }

        // 创建提示框元素
        createToastElement();

        // 收藏按钮点击事件
        document.querySelectorAll('.favorite-button').forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();

                // 如果未登录，直接跳转到登录页面
                if (!window.isAuthenticated) {
                    showToast('请先登录才能使用收藏功能');
                    setTimeout(() => {
                        window.location.href = `/user/login/?next=${window.location.pathname}`;
                    }, 1500);
                    return;
                }

                // 防止重复点击
                if (this.classList.contains('loading')) {
                    return;
                }

                const strategyId = this.getAttribute('data-strategy-id');
                toggleFavorite(this, strategyId);
            });

            // 鼠标悬停显示提示
            button.addEventListener('mouseenter', function() {
                // 未登录时显示登录提示
                if (!window.isAuthenticated) {
                    const tooltip = this.querySelector('.favorite-tooltip');
                    tooltip.textContent = '请先登录';
                    tooltip.style.opacity = '1';
                    return;
                }

                const tooltip = this.querySelector('.favorite-tooltip');
                const isFavorited = this.classList.contains('favorited');
                tooltip.textContent = isFavorited ? '取消收藏' : '收藏';
                tooltip.style.opacity = '1';
            });

            button.addEventListener('mouseleave', function() {
                const tooltip = this.querySelector('.favorite-tooltip');
                tooltip.style.opacity = '0';
            });
        });

        // 修改收藏状态初始化逻辑
        function initFavoriteButtons() {
            document.querySelectorAll('.favorite-button').forEach(button => {
                const strategyId = button.getAttribute('data-strategy-id');

                // 如果用户未登录，显示空心图标并禁用按钮
                if (!window.isAuthenticated) {
                    button.classList.add('disabled');
                    button.querySelector('i').className = 'far fa-heart';
                    return;
                }

                // 如果收藏状态已获取，根据状态显示
                if (window.favoriteStatus[strategyId] !== undefined) {
                    updateFavoriteButtonState(button, window.favoriteStatus[strategyId]);
                } else {
                    // 状态未知时显示加载中
                    button.innerHTML = '<span class="loading-spinner"></span>';
                    button.classList.add('loading');
                }
            });
        }

        // 更新收藏按钮状态函数
        function updateFavoriteButtonState(button, isFavorited) {
            if (isFavorited) {
                button.classList.add('favorited');
                button.querySelector('i').className = 'fas fa-heart';
            } else {
                button.classList.remove('favorited');
                button.querySelector('i').className = 'far fa-heart';
            }

            // 更新提示文本
            const tooltip = button.querySelector('.favorite-tooltip');
            if (tooltip) {
                tooltip.textContent = isFavorited ? '取消收藏' : '收藏';
            }

            // 移除加载状态
            button.classList.remove('loading');
        }

        // 从服务器加载收藏状态（仅当用户已登录时）
        function loadFavoriteStrategies() {
            // 调用API检查收藏状态
            fetch('/api/favorites/check-all/', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                credentials: 'include'
            })
            .then(response => {
                if (!response.ok) {
                    if (response.status === 401) {
                        // 未登录，不做处理
                        return {};
                    }
                    throw new Error('获取收藏状态失败');
                }
                return response.json();
            })
            .then(data => {
                // 更新全局收藏状态
                if (data.favorites) {
                    data.favorites.forEach(id => {
                        window.favoriteStatus[id] = true;
                    });
                }

                // 更新所有收藏按钮状态
                updateAllFavoriteButtons();
            })
            .catch(err => {
                console.error('加载收藏状态失败:', err);
                showToast('加载收藏状态失败，请刷新页面重试');
            });
        }

        // 更新所有收藏按钮状态
        function updateAllFavoriteButtons() {
            document.querySelectorAll('.favorite-button').forEach(button => {
                const strategyId = button.getAttribute('data-strategy-id');
                const isFavorited = window.favoriteStatus[strategyId] || false;

                // 移除加载状态
                button.classList.remove('loading');
                button.innerHTML = '<i class="far fa-heart"></i><span class="favorite-tooltip">收藏</span>';

                // 更新收藏状态
                updateFavoriteButtonState(button, isFavorited);
            });
        }

        // 切换收藏状态
        function toggleFavorite(button, strategyId) {
            // 显示加载状态
            button.classList.add('loading');
            button.innerHTML = '<span class="loading-spinner"></span>';

            // 检查当前是否已收藏
            const isCurrentlyFavorited = window.favoriteStatus[strategyId] || false;
            const action = isCurrentlyFavorited ? 'remove' : 'add';

            // 调用API切换收藏状态
            fetch(`/api/favorites/${action}/${strategyId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCSRFToken()
                },
                credentials: 'include'
            })
            .then(response => {
                if (response.status === 401) {
                    // 未登录，跳转到登录页
                    showToast('请先登录才能使用收藏功能');
                    setTimeout(() => {
                        window.location.href = `/user/login/?next=${window.location.pathname}`;
                    }, 1500);
                    throw new Error('未登录');
                }

                if (!response.ok) {
                    throw new Error('操作失败');
                }

                return response.json();
            })
            .then(data => {
                if (data.success) {
                    // 更新全局收藏状态
                    window.favoriteStatus[strategyId] = !isCurrentlyFavorited;

                    // 更新按钮状态
                    button.classList.remove('loading');
                    button.innerHTML = '<i class="far fa-heart"></i><span class="favorite-tooltip">收藏</span>';
                    updateFavoriteButtonState(button, !isCurrentlyFavorited);

                    // 显示提示消息
                    showToast(isCurrentlyFavorited ? '已取消收藏' : '收藏成功');
                } else {
                    showToast('操作失败: ' + (data.message || '未知错误'));
                }
            })
            .catch(err => {
                console.error('收藏操作失败:', err);
                if (err.message !== '未登录') {
                    showToast('操作失败，请稍后重试');
                }

                // 恢复按钮状态
                button.classList.remove('loading');
                button.innerHTML = '<i class="far fa-heart"></i><span class="favorite-tooltip">收藏</span>';
                updateFavoriteButtonState(button, isCurrentlyFavorited);
            });
        }

        // 获取CSRF令牌（Django需要）
        function getCSRFToken() {
            const cookies = document.cookie.split(';');
            for (let cookie of cookies) {
                const [name, value] = cookie.trim().split('=');
                if (name === 'csrftoken') {
                    return value;
                }
            }
            return '';
        }

        // 创建提示框元素
        function createToastElement() {
            const toast = document.createElement('div');
            toast.className = 'toast-message';
            toast.style.display = 'none';
            document.body.appendChild(toast);
        }

        // 显示提示消息
        function showToast(message) {
            const toast = document.querySelector('.toast-message');
            toast.textContent = message;
            toast.style.display = 'block';

            // 触发动画
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);

            // 3秒后隐藏
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => {
                    toast.style.display = 'none';
                }, 300);
            }, 3000);
        }
    });
</script>
{% endblock %}